<template>
  <div class="inbound-task-detail">
    <!-- 页面标题 & 返回按钮 -->
    <div class="page-header">
      <h4>入库任务详情 ({{ route.query.taskCode }})</h4>
      <el-button type="primary" @click="handleReturn">返回</el-button>
    </div>
    <hr />
    <br />
    <!-- 查询条件区域 -->
    <el-form :model="searchForm" inline label-position="right" class="search-form">
      <el-form-item label="商品品类">
        <el-input v-model="searchForm.category" placeholder="请输入商品品类" />
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input v-model="searchForm.goodsName" placeholder="请输入商品名称" />
      </el-form-item>
      <el-form-item label="入库状态">
        <el-select v-model="searchForm.inStatus" placeholder="全部" style="width: 100px;">
          <el-option label="全部" value="" />
          <el-option label="未入库" value="1" />
          <el-option label="部分入库" value="2" />
          <el-option label="全部入库" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-print="handlePrint">打印入库单</el-button>
      </el-form-item>
    </el-form>

    <!-- 商品列表表格 -->
    <el-table :data="tableData" border style="width: 100%; margin-top: 20px" id="printArea">
      <el-table-column prop="serial" type="index" label="序号" width="60" />
      <el-table-column prop="category" label="商品品类" />
      <el-table-column prop="goodsCode" label="商品编码" />
      <el-table-column prop="goodsName" label="商品名称" />
      <el-table-column prop="spec" label="商品规格" />
      <el-table-column prop="unit" label="计量单位" />
      <el-table-column prop="num" label="加工任务数量" />
      <el-table-column prop="inNum" label="已入库数量" />
      <el-table-column prop="inUser" label="入库人" />
      <el-table-column label="入库状态">
        <template #default="scope">
          <span v-if="scope.row.inStatus === 1">未入库</span>
          <span v-else-if="scope.row.inStatus === 2">部分入库</span>
          <span v-else-if="scope.row.inStatus === 3">全部入库</span>
          <span v-else>{{ scope.row.inStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="operation" label="操作" width="100">
        <template #default="scope">
          <!-- 点击按钮触发弹框 -->
          <el-button type="text" @click="handleOpenDialog(scope.row.operation)">
            {{ scope.row.operation }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 关闭/恢复原因弹框 -->
    <el-dialog title="关闭/恢复原因" v-model="dialogVisible" width="500px">
      <el-input v-model="reason" style="width: 460px" :rows="2" type="textarea" placeholder="请输入关闭/恢复原因" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 分页 -->
    <div class="demo-pagination-block">
      <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper" :total="totalCount" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute,useRouter } from 'vue-router'
import { queryTaskDetail } from '@/api/stockIn/processStockIn'


// 分页相关参数
const page = ref(1)
const pageSize = ref(10)
const totalCount = ref(0)

// 查询表单数据
const searchForm = ref({
  category: '',
  name: '',
  inStatus: ''
})
// 获取路由参数
const route = useRoute()

const router = useRouter()
// 表格数据
const tableData = ref([])

// 加载状态
const loading = ref(false)

async function init() {
  try {
    // 显示加载状态
    loading.value = true
    // 使用对象扩展运算符简化参数构建
    let params = {
      a_type: 'process',
      page: page.value,
      pageSize: pageSize.value,
      process: {
        ...searchForm.value,
        taskId: route.query.taskId
      }
    }
    const res = await queryTaskDetail(params)
    console.log('params>>>>>', params)
    if (res.code === 200) {
      tableData.value = res.data.list
      totalCount.value = res.data.total
    } else {
      console.error('获取数据失败:', res)
      // 可以在这里添加错误提示
      // ElMessage.error(`获取数据失败: ${res.msg || '未知错误'}`)
    }
  } catch (error) {
    console.error('接口请求错误:', error)
    // ElMessage.error('网络错误，请稍后重试')
  } finally {
    // 无论成功失败都关闭加载状态
    loading.value = false
  }
}

onMounted(() => {
  init()
})

// 返回事件
const handleReturn = () => {
  // 可跳转回上一级页面（如入库任务列表）
  console.log('执行返回操作')
  router.back()
}

// 查询事件
const handleSearch = () => {
  // 可对接接口，根据 searchForm 传参更新 tableData
  console.log('查询条件：', searchForm)
  page.value = 1 // 重置到第一页
  init() // 调用接口获取数据
}

const handlePrint = ref({
  id: 'printArea',
  popTitle: '打印标题',
  preview: true,
});

// 弹框状态 & 原因
const dialogVisible = ref(false)
const reason = ref('')

// 打开弹框：区分“关闭”“恢复”，可扩展不同逻辑
const handleOpenDialog = (op) => {
  dialogVisible.value = true
  // 可根据 op 类型（关闭/恢复），设置弹框标题或预设内容
  console.log('操作类型：', op)
}

// 确定按钮：提交原因
const handleConfirm = () => {
  if (!reason.value.trim()) {
    // 简单校验：原因不能为空
    ElMessage.warning('请填写关闭/恢复原因')
    return
  }
  // 调用接口提交原因（示例）
  console.log('提交原因：', reason.value)
  // 关闭弹框
  dialogVisible.value = false
  // 清空原因
  reason.value = ''
}

// 分页 - 每页条数变化
const handleSizeChange = newSize => {
  pageSize.value = newSize
  page.value = 1
  init()
}

// 分页 - 当前页变化
const handleCurrentChange = newPage => {
  page.value = newPage
  init()
}
</script>

<style scoped>
.inbound-task-detail {
  padding: 20px;
  background: #fff;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-form {
  margin-bottom: 10px;
}

/* 打印样式：只显示id="printArea"区域，其它全部隐藏 */
@media print {
  .print-area {
    page-break-after: always;
  }
}
</style>